<template>
    <div class="category-item-list">
        <div class="item-inner">
            <div class="cover">
                <img :src="data.cover" v-if="data.cover">
                <img v-else src="../assets/pp.jpg">
            </div>
            <div class="category-info">
                <div class="name">
                    <router-link :to="'/web-category/'+data.categoryId" class="a-link">{{ data.categoryName }}
                    </router-link>
                </div>
                <div class="desc"> {{ data.categoryDesc }}</div>
                <div class="blogCount">{{ data.blogCount }} 篇</div>
            </div>
        </div>

    </div>
</template>

<script setup>
    const props = defineProps({
        data: {
            type: Object
        }
    })
</script>

<style lang="scss">
    .category-item-list {
        display: flex;
        padding: 10px;
        align-items: center;
        width: 25%;

        .item-inner {
            border: 1px solid #ddd;
            width: 100%;
            padding: 10px;
            display: flex;

            .cover {
                width: 100px;
                height: 100px;
                background: #ddd;
                display: flex;
                align-items: center;
                overflow: hidden;

                img {
                    width: 100%;

                }
            }

            .category-info {
                flex: 1;
                margin-left: 10px;

                .name {
                    flex: 1;
                    display: block;
                    word-break: keep-all;
                    white-space: nowrap;
                    overflow: hidden; //控制当文本内容超出容器时是否隐藏超出的部分。在这里，超出的部分将被隐藏
                    text-overflow: ellipsis;
                    margin: 0px 5px;
                    font-size: 18px;
                    font-weight: bold;
                }

                .desc {
                    margin-top: 10px;
                }

                .blogCount {
                    margin-top: 10px;
                    width: 30px;
                    font-size: 13px;
                    color: #999aaa;
                }
            }

        }

    }</style>